<template>
  <div >
    <div class="home">
      <h1>主页</h1>
      <br/>
      
      <button @click="gotoGames">我想看很多电影</button>
      <button @click="gotoMovie">电影</button>
      <button @click="gotoMusic">音乐</button>
      <br>
      <br>

      <button @click="gotoHtml">Html</button>
      <button @click="gotoCss">Css</button>
      <button @click="gotoJs">Js</button>

      <br/>
      <br/>
      <button @click="gotoLogin" id="login">回到登录页面</button>
    </div>

    <div class="list">
      <!-- 二级路由位置 -->
      <router-view></router-view>
    </div>

  </div>
</template>

<script>
import axios from "axios";
import { mapMutations } from 'vuex';
export default {
    name: "Home",
    methods:{

      //映射函数 提交(commit)电影数据到state
      ...mapMutations(["addMovie"]),

      //query传参
      async gotoGames(){
        //请求电影列表
        const result = await axios.get(
            "https://pcw-api.iqiyi.com/search/recommend/list?channel_id=1&data_type=1&mode=11&page_id=2&ret_num=48&session=b9fd987164f6aa47fad266f57dffaa6a"
        );
        //拿到电影列表
        const movList = result.data.data.list;

        //电影函数commit电影列表数据
        this.addMovie(movList)

        //跳转到电影页面
        this.$router.push({
          name: "game",
          query: {
            tit: "电影列表",
            verson: "2001",
          }
        })
      },

      //params传参
      gotoMovie(){
        this.$router.push({
          name: 'movie',
          params: {
            id: '星际穿越',
            time: '184'
          }
        })
      },

      //字符串方式传参
      gotoMusic(){
        this.$router.push("/home/music?type=粤语&time=5")
      },

      //去学科页面html
      gotoHtml(){
        this.$router.push({
          name: "study",
          //params可以不在路由表中配置
          params:{
            type: 'html',
            t: 'easy'
          }
        })
      },

      //去学科页面css
      gotoCss(){
        this.$router.push({
          name: "study",
          //params可以不在路由表中配置
          query:{
            type: 'css',
            t: 'enter'
          }
        })
      },

      //去学科页面js
      gotoJs(){
        this.$router.push({
          name: "study",
          //params可以不在路由表中配置
          query:{
            type: 'js',
            t: 'nan'
          }
        })
      },



      //回到登录页
      gotoLogin(){
        this.$router.push("/login")
      }

    }
}
</script>

<style scoped>
.home{
  /* height: 160px; */
  text-align: center;
  margin: 20px;
  background-color: aqua;
}

.list{
  margin: 20px;
  background-color: deepskyblue;
}

#login{
  background-color: deepskyblue;
}
</style>